<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />

  <span>Multiline textarea msg is:</span>
  <p style="white-space: pre-line;">{{ textareamsg }}</p>
  <textarea v-model="textareamsg" placeholder="输入"></textarea>
  <br>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
  <div>
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
  </div>

  <div>
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>

  <div>
    <div>Selected: {{ multiselected }}</div>

    <select v-model="multiselected" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>

  <div>
    <div>Selected: {{ dynamicselected }}</div>
    <select v-model="dynamicselected">
      <option v-for="option in options" :value="option.value" :key="option">
        {{ option.text }}-{{option.value}}
      </option>
    </select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
const textareamsg = ref()
var checked = ref(false)
var picked = ref()
var selected=ref()
var multiselected=ref()

const dynamicselected = ref('TEST')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
</script>

<style scoped>

</style>